import { history } from 'umi';
import React from 'react';
import { NavBar, Flex, Button, Image, Typography, Toast, NoticeBar } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { InfoO } from '@react-vant/icons';
import './grab.less';

const goBack = () => {
  history.back();
}

export default function GrabPage() {
  return (
    <div className='grab'>
      <NavBar title='附近抢单' leftText='返回' onClickLeft={goBack} />
      <div className='container'>
        <NoticeBar
          className='grab-notice'
          leftIcon={<InfoO />}
          text='报名前请看清发单信息，确保符合时间及其他要求'
        />
        <div className='grab-item'>
          <Flex align='center' justify='between' className='grab-order-title'>
            <Flex.Item className='grab-order-user'>
              <Flex align='center' gutter={5}>
                <Flex.Item><Image round width='24' height='24' fit='cover'
                                  src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' /></Flex.Item>
                <Flex.Item>菲利</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item className='grab-order-time'>2024-06-20 16:45:21</Flex.Item>
          </Flex>
          <div className='grab-order-info'>
            <Flex align='center' justify='between' gutter={10}>
              <Flex.Item className='grab-order-detail' span={18}>
                <Flex direction='column' gutter={5}>
                  <Flex.Item className='grab-order-detail-time'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>时间：</Flex.Item>
                      <Flex.Item span={19}>今天 21:00 ~ 24:00</Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-type'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>项目：</Flex.Item>
                      <Flex.Item span={19}>微醺小酌</Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-location'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>地点：</Flex.Item>
                      <Flex.Item span={19}><Typography.Text ellipsis={2}>武汉市江汉区华发商贸广场商铺A1栋102号</Typography.Text></Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-note'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>备注：</Flex.Item>
                      <Flex.Item span={19}><Typography.Text ellipsis={3}>喝酒蹦迪 漂亮的来 照骗勿扰 喝酒蹦迪 漂亮的来 照骗勿扰 喝酒蹦迪 漂亮的来 照骗勿扰 喝酒蹦迪 漂亮的来 照骗勿扰</Typography.Text></Flex.Item>
                    </Flex>
                  </Flex.Item>
                </Flex>
              </Flex.Item>
              <Flex.Item className='grab-order-action' span={6}>
                <Button className='grab-btn' type='primary' size='small' round onClick={() => Toast.info('报名成功')}>报名</Button>
              </Flex.Item>
            </Flex>
          </div>
        </div>
        <div className='grab-item'>
          <Flex align='center' justify='between' className='grab-order-title'>
            <Flex.Item className='grab-order-user'>
              <Flex align='center' gutter={5}>
                <Flex.Item><Image round width='24' height='24' fit='cover'
                                  src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' /></Flex.Item>
                <Flex.Item>菲利</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item className='grab-order-time'>2024-06-19 22:45:21</Flex.Item>
          </Flex>
          <div className='grab-order-info'>
            <Flex align='center' justify='between' gutter={10}>
              <Flex.Item className='grab-order-detail' span={18}>
                <Flex direction='column' gutter={5}>
                  <Flex.Item className='grab-order-detail-time'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>时间：</Flex.Item>
                      <Flex.Item span={19}>今天 21:00 ~ 24:00</Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-type'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>项目：</Flex.Item>
                      <Flex.Item span={19}>台球助教</Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-location'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>地点：</Flex.Item>
                      <Flex.Item span={19}><Typography.Text ellipsis={2}>夜时尚（光谷步行街店）</Typography.Text></Flex.Item>
                    </Flex>
                  </Flex.Item>
                  <Flex.Item className='grab-order-detail-note'>
                    <Flex gutter={5}>
                      <Flex.Item className='title' span={5}>备注：</Flex.Item>
                      <Flex.Item span={19}><Typography.Text ellipsis={3}>要求会打台球 不需要太厉害</Typography.Text></Flex.Item>
                    </Flex>
                  </Flex.Item>
                </Flex>
              </Flex.Item>
              <Flex.Item className='grab-order-action' span={6}>
                <Button className='grab-btn done' type='primary' size='small' round onClick={() => Toast.info('取消报名成功')}>取消</Button>
              </Flex.Item>
            </Flex>
          </div>
        </div>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
